import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_study/model/topic_detail_model.dart';
import 'package:flutter_study/provider/topic_detail_page_model.dart';
import 'package:flutter_study/util/navigator_manager.dart';
import 'package:flutter_study/widget/loading_container.dart';
import 'package:flutter_study/widget/provider_widget.dart';

import 'topic_detail_widget_item.dart';

class TopicDetailPage extends StatefulWidget {
  final int detailId;

  const TopicDetailPage({Key key, @required this.detailId}) : super(key: key);

  @override
  _TopicDetailPageState createState() => _TopicDetailPageState();
}

class _TopicDetailPageState extends State<TopicDetailPage> {
  @override
  Widget build(BuildContext context) {
    return ProviderWidget<TopicDetailPageModel>(
        model: TopicDetailPageModel(),
        onModelInit: (model) {
          model.loadTopicDetailData(widget.detailId);
        },
        builder: (context, model, child) {
          return Scaffold(
              backgroundColor: Colors.white,
              appBar: _appBar(model.topicDetailModel),
              body: LoadingContainer(
                loading: model.loading,
                error: model.error,
                retry: model.retry,
                child: CustomScrollView(
                  slivers: [
                    _headWidget(model.topicDetailModel),
                    SliverList(

                      delegate: SliverChildBuilderDelegate((context, index) {
                        return TopicDetailWidgetItem(
                            model: model.itemList[index]);
                      },childCount: model.itemList.length),
                    )
                  ],
                ),
              ));
        });
  }

  _appBar(TopicDetailModel topicDetailModel) {
    return AppBar(
      centerTitle: true,
      backgroundColor: Colors.white,
      elevation: 0,
      brightness: Brightness.light,
      leading: IconButton(
        icon: Icon(Icons.arrow_back), color: Colors.black, onPressed: () {
        NavigatorManager.back();
      },),
      title: Text(
        topicDetailModel.brief,
        style: TextStyle(
            fontSize: 18, color: Colors.black, fontWeight: FontWeight.bold),
      ),
    );
  }

  _headWidget(TopicDetailModel topicDetailModel) {
    return SliverToBoxAdapter(
      child: Stack(
        children: [
          Column(children: [
            CachedNetworkImage(
              fit: BoxFit.cover,
              errorWidget: (context, url, error) {
                return Image.asset('images/img_load_fail.png');
              },
              imageUrl: topicDetailModel.headerImage,
              width: MediaQuery
                  .of(context)
                  .size
                  .width,
              height: 250,),
            Padding(child: Text(topicDetailModel.text, style: TextStyle(),),
                padding: EdgeInsets.fromLTRB(20, 40, 20, 10)),
            Container(height: 5, color: Colors.black12,),
          ],),
          Positioned(top: 230, left: 20, right: 20, child: Container(
            width: MediaQuery
                .of(context)
                .size
                .width,
            height: 50,
            alignment: Alignment.center,
            decoration: BoxDecoration(color: Colors.white,
                borderRadius: BorderRadius.circular(5),
                border: Border.all(color: Color(0XFFF5F5F5))),
            child: Text(topicDetailModel.brief, style: TextStyle(fontSize: 14,
                color: Colors.black,
                fontWeight: FontWeight.bold),),
          ))
        ],
      ),
    );
  }
}
